<template>
	<view :class="className" @click="click" class="plr-10" hover-class="hoverClass">
		<z-icon v-if="icon"></z-icon>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "w-button",
		props: {
			size: {
				type: String,
				default: 'lg'
			},
			type: {
				type: String,
				default: 'colorful'
			},
			shape: {
				type: String, //square circle
				default: 'square'
			},
			icon: {
				type: String,
				default: null,
			},
			iconSize: {
				type: [Number, String],
				default: 14
			},
			disabled: {
				type: Boolean,
				default: false
			},
			pain: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			className() {
				let className = 'z-btn '
				className += ' btn-size-' + this.size
				className += ' btn-type-' + this.type
				className += ' ' + this.shape
				className += this.disabled ? ' disabled' : ''
				className += this.pain ? ' pain' : ''
				return className
			}
		},
		data() {
			return {

			};
		},
		methods: {
			click(e) {
				if (this.disabled) return
				this.$emit('click', e)
			}
		}
	}
</script>

<style lang="scss">
	.z-btn {
		@extend .flex-center;
		white-space: nowrap;
		box-sizing: border-box;
	}

	$btn-size:(
	lg:(h:92rpx, text:32rpx, round:50rpx), 
	sm:(h:66rpx, text:24rpx, round:33rpx),
	ss:(h:56rpx,text:28rpx,round:28rpx),
	mini:(h:50rpx, text:34rpx, round:25rpx),
	mm:(h:44rpx,text:20rpx,round:22rpx)
	 ); //按钮大小

	@each $btnk,
	$btnv in $btn-size {
		.btn-size-#{$btnk} {
			height: map-get($btnv, h);
			font-size: map-get($btnv, text);
			border-radius: map-get($map: $btnv, $key: round);
		}

		.btn-size-#{$btnk}.circle {
			height: map-get($btnv, h);
			border-radius: map-get($btnv, round);
			border-radius: 50rpx;
		}

	}
	
	



	$primary:(bg:#F52500, color:white,painBorder:#F52500, disabledBg: #F52500, disableText:white);
	$dark:(bg:$theme-jb-color, color:white,painBorder:#222,disabledBg: #E3E3E3,disableText:#666666);
	$light:(bg:#FFFFFF, color:#000000,disabledBg:#EAECEF, disableText:#999999);
	$warning:(bg:#F52500,color:white,disabledBg:#F52500,painBorder:#F52500);
	$light-trans:(bg:linear-gradient(116deg, rgba(255,255,255,0.49) 0%, rgba(255,255,255,0.74) 100%), color:white,disabledBg:#3e3e3e, disableText:#999);
	
	
	$colorful:(bg:#1952F8,color:#fff,painBorder:#1952F8,disabledBg: #C9CED4,disableText:#fff);
	$colorfulpain:(bg:$theme-color,color:#222,painBorder:$theme-color,disabledBg: #999999,disableText:#666666);
	$colorfulbuy:(bg:$theme-color,color:#fff,painBorder:$theme-color,disabledBg: #D2DCFF,disableText:#FFFFFF);
	
	$draw:(bg:url($IMG_URL + '/static/draw/draw-btn-color.png'), color:#fff,disabledBg: url($IMG_URL + '/static/draw/draw-btn-hui.png'),disableText:#fff);

	$btn-type:(primary:$primary, light:$light, dark:$dark,warning:$warning,colorful:$colorful,light-trans:$light-trans,fulpain:$colorfulpain,draw:$draw,colorfulbuy:$colorfulbuy); //按钮类型

	@each $btnk,
	$btnv in $btn-type {
		.btn-type-#{$btnk} {
			background: map-get($btnv, bg);
			color: map-get($btnv, color);
			background-size: cover;
			background-repeat: no-repeat;
		}

		.btn-type-#{$btnk}.pain {
			background: transparent;
			border: 1px solid map-get($btnv, painBorder);
			color: map-get($btnv, painBorder);
		}

		.btn-type-#{$btnk}.disabled.pain {
			background: transparent;
			border: 1px solid map-get($btnv, painBorder);
			color: map-get($btnv, painBorder);
			background-size: cover;
		}

		.btn-type-#{$btnk}.disabled {
			background: map-get($btnv, disabledBg);
			color: map-get($btnv, disableText);
			background-size: cover;
			
		}
	}
	.hoverClass {
		opacity: 0.8;
	}
</style>
